<template>
	<view class="app">
		<AppNavbar :bgColor="'#ffff'" leftIconColor="black" title="Date reminder" titlecolor="black" :fontWeight="600"
			@rightClick="add">
		</AppNavbar>
		<!-- 滑动标签 -->
		<up-tabs @change="tabchange" style="background-color: #fff;" itemStyle="width:50%;height:80rpx" :list="list"
			lineColor='#f9a438' lineWidth='30' :activeStyle="{
		    color: '#f9a438',
		    fontWeight: 'bold',
		    fontSize:'28rpx'
		}" :inactiveStyle="{
		    color: '#a79fa2',
		    fontSize:'28rpx'
		}"></up-tabs>
		<up-gap height="10" bgColor="#f8f7fc"></up-gap>
		<!-- 日历组件 -->
		<calendar ref="calendarRef" @changeTime="changeTime"></calendar>
	</view>
</template>

<script setup>
	import calendar from '@/components/calendar/calendar.vue'
	import {
		addhealth,
		gethealthMonth,
		deleteHealthAlert
	} from '../../api/healthPlan';
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const list = reactive([{
			name: 'Everyday'
		},
		{
			name: 'Custom'
		}
	]);

	let state = reactive({
		healthProgramDate: '',
		healthProgramType: 0,
		chokerId: '',
		healthList: []
	})

	let calendarRef = ref(null)

	onLoad((e) => {
		state.chokerId = e.chokerId
		state.healthProgramType = e.type
		initDate()
		init()
	})


	const getday = (dateString) => { //获得时间格式内部的天数
		// const dateString = v.healthProgramDate
		const parts = dateString.split('-');
		const day = parts[2].split(' ')[0];
		return day
	}

	const initDate = () => {
		const currentDate = new Date();
		const currentYear = currentDate.getFullYear();
		const currentMonth = currentDate.getMonth() + 1;
		const currentDay = currentDate.getDate();

		// 使用padStart确保月份和日期始终是两位数
		const formattedMonth = String(currentMonth).padStart(2, '0');
		const formattedDay = String(currentDay).padStart(2, '0');

		state.healthProgramDate = `${currentYear}-${formattedMonth}-${formattedDay}`;
	}

	// const tabchange = () => {
	// 	calendarRef.value.activekey = 0
	// }

	const changeTime = (e) => {
		state.healthProgramDate = e.all

		console.log(e);

		if (e.exist) {
			state.healthList.forEach(v => {
				if (v.healthProgramDate.includes(e.all)) { //删除计划
					deleteHealthAlert({
						healthAlertId: v.healthAlertId
					}).then(res => {
						// uni.tools.showTips
						init()
					})
				}
			})
		} else {
			add().then(() => {
				init()
			})
		}


	}

	const add = async () => {
		await addhealth({
			chokerId: state.chokerId,
			healthAlertId: '',
			healthProgramDate: state.healthProgramDate,
			healthProgramType: state.healthProgramType
		})
	}


	const init = async () => {
		let res = await gethealthMonth({
			chokerId: state.chokerId,
			time: state.healthProgramDate,
			healthProgramType: state.healthProgramType
		})
		let list = []
		if (res.data?.list) {
			state.healthList = res.data?.list
			res.data.list.forEach(v => {
				let day = getday(v.healthProgramDate)
				list.push((parseInt(day, 10) - 1))
			})
		}
		calendarRef.value.modifyactivekey(list)
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f7fc;
	}
</style>